import React, { Component } from 'react';
import ReactDOM from "react-dom";
import {Link} from "react-router";
import $ from "jquery";
import {connect} from "react-redux";



import {Footer}  from "../components";
import {fetchList} from "../actions/actions_getNewsList";


const mapStateToProps=(state)=>{  
        return {
            newsList:state.newsList
        }
}



class App extends Component{
 
    render(){        
        return (
            <div>
                <div className="row">
                    <div className="col-md-12 logo"><img src="./img/logo.jpg"/></div>                   
                </div>

                <nav className="navbar navbar-default">
                        <div className="container">
                            <div className="navbar-header">
                                <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                                    <span className="sr-only">Toggle navigation</span>
                                    <span className="icon-bar"></span>
                                    <span className="icon-bar"></span>
                                    <span className="icon-bar"></span>
                                </button>                                
                            </div>
                            <div id="navbar" className="navbar-collapse collapse">
                                <ul className="nav navbar-nav">
                                    <li className="Home"><Link to="/">全部商品</Link></li>
                                    <li> <Link to="/jacket">外套</Link> </li>
                                    <li><Link to="/Tshirt">T-shirt</Link></li>
                                    <li><Link to="/overcoat">大衣</Link></li>
                                    <li><Link to="/cottonDress">棉服</Link></li>
                                    <li className="dropdown">
                                        <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下装 <span className="caret"></span></a>
                                        <ul className="dropdown-menu">
                                            <li><Link to="/longs">长裤</Link></li>
                                            <li><Link to="/jiu">七/就分裤</Link></li>
                                            <li><Link to="/shorts">短裤</Link></li>
                                        </ul>
                                    </li>
                                    <li><Link to="/others">配饰其他</Link></li>
                                    <li><Link to="/news">新闻</Link></li>                                    
                                </ul>                                
                            </div>
                        </div>
                    </nav>

                    <div className="row">
                        <div className="col-md-2">
                            <div className="list-group">
                                <a href="#" className="list-group-item">新闻1</a>
                                <a href="#" className="list-group-item">新闻2</a>
                                <a href="#" className="list-group-item">新闻3</a>
                                <a href="#" className="list-group-item">新闻4</a>
                                <a href="#" className="list-group-item">新闻5</a>
                            </div>
                        </div>

                        <div className="col-md-8">
                            <div className="banner"><img src="//gdp.alicdn.com/imgextra/i2/56014052/TB2viFvg26H8KJjSspmXXb2WXXa_!!56014052.jpg"/></div> 
                        </div>

                        <div className="col-md-2">
                            <div className="list-group">
                                <a href="#" className="list-group-item">评论1</a>
                                <a href="#" className="list-group-item">评论2</a>
                                <a href="#" className="list-group-item">评论3</a>
                                <a href="#" className="list-group-item">评论4</a>
                                <a href="#" className="list-group-item">评论5</a>
                            </div>
                        </div>

                    </div>
                    
                    <div className="row">
                        <div className="col-md-12 cutApart">
                            <span>~~~~~我~~~~~是~~~~~一~~~~~道~~~~~亮~~~~~丽~~~~~的~~~~~分~~~~~割~~~~~线~~~~~</span>
                        </div>                   
                    </div>

                    <div id="contain">
                             {this.props.children}
                    </div>
                    
                   
                    <div className="contentBottom"><img src="//gdp.alicdn.com/imgextra/i3/56014052/T2sRMpXf0aXXXXXXXX_!!56014052.jpg"/></div>

                    <div className="goBack"><a title="回到顶部" className="btn" href="#">回到顶部</a></div>

                   <Footer />
            </div>
        )
    }


    componentDidMount(){
        // this.props.fetchList();   //fetch请求数据
        $(".navbar-nav li:not(.dropdown)").on("click",function(){
               $("html").scrollTop(850);
        });       
    }
    
}




export default connect(mapStateToProps,{fetchList})(App);       //顺序问题
